<template>
  <view class="content padding-bottom">
    <search></search>
    <view class="body" v-for="business in businessList" :key="business.branch_shop_id">
      <view class="businessInfo" @click="goDetail(business.branch_shop_id)">
        <img class="logo" :src="business.logo" alt="" />
        <view class="info">
          <view class="title">{{ business.branch_shop_name }}</view>
          <view>{{ business.distance }}</view>
          <view class="address">{{ business.address }}</view>
          <view class="choose">自提/配送</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import search from '@/components/search'
export default {
  data() {
    return {
      lng: 0, // 经度
      lat: 0 // 维度
    }
  },
  mounted() {
    uni.startPullDownRefresh()
  },
  onPullDownRefresh() {
    this.getData()
    uni.stopPullDownRefresh()
  },
  onShow() {
    // 获取地理位置
    // uni.getLocation({
    //   type: 'gcj02',
    //   success: (res) => {
    //     this.lng = res.longitude
    //     this.lat = res.latitude
    //     console.log(this.lng, this.lat, 1)
    //   },
    // })
  },
  computed: {
    ...mapState({
      businessList: (state) => state.business.businessList
    })
  },
  methods: {
    getData() {
      this.$store.dispatch('getBusinessList')
    },
    goDetail(id) {
      uni.navigateTo({
        url: '/pages/detail/index?id=' + id
      })
    }
  },
  components: {
    search
  }
}
</script>

<style lang="less" scoped>
.content {
  position: absolute;
  width: 100%;
  font-size: 30rpx;
}

.body {
  margin-top: 30rpx;
  border-bottom: 1px solid #eee;

  .businessInfo {
    display: flex;
    height: 240rpx;
    margin: 0 20rpx;

    .logo {
      margin-right: 20rpx;
      width: 150rpx;
      height: 150rpx;
      border-radius: 5px;
    }

    .info {
      width: 100%;
      color: #666666;
      view:nth-child(2) {
        margin: 10rpx 0;
      }

      .title {
        color: #000;
        font-weight: bold;
      }

      .address {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
        white-space: nowrap;
      }

      .choose {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ea1625;
        width: 170rpx;
        height: 70rpx;
        color: #fff;
        border-radius: 5px;
        margin-top: 15rpx;
        margin-left: auto;
      }
    }
  }
}
</style>
